<template>
	<view>
		<div class="container">
			<div style="height: 80px;width: 500px;" :id="index" v-for="(item,index) in items" :key="index" draggable="true" class="boxxx"
				:style="'background-color:' +  item.color">
				 
			</div>
		</div>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: [{
						key: 1,
						color: '#ffebcc'
					},
					{
						key: 2,
						color: '#ffb86c'
					},
					{
						key: 3,
						color: '#f01b2d'
					}
				],


			};
		},
		created() {
			let that = this;
			let clid_id = 0;
			let old_id = 0;
			setTimeout(function() {
				const container = document.querySelector('.container');
				container.ondragstart = (e) => {
					//监听用户起始选择的id
					console.log('start', e.target.id);
					clid_id = e.target.id;

				};

				container.ondragover = (e) => { //拖动行驶中一直触发
		 
					e.preventDefault();
					// if (e.target.id != old_id) {
					// 	old_id =e.target.id 
					// 	that.items = that.handleSwapArray(that.items, e.target.id, clid_id)
					// }

					// console.log('over', e.target.id);
				};

				container.ondrop = (e) => { //放手
				console.log("e: " + JSON.stringify(e.target));
				 console.log('放手', e.target.id);

					that.items = that.handleSwapArray(that.items, e.target.id, clid_id)

				};



			}, 100);

		},


		methods: {

			/**
			 * 数组元素交换位置
			 * @param {array} arr 数组
			 * @param {number} index1 添加项目的位置(当前数组点击的索引)
			 * @param {number} index2 删除项目的位置(要移动到数组具体位置的索引)
			 */
			handleSwapArray(arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				return arr;
			},


		}
	}
</script>

<style lang="scss">
	.boxxx {
		padding-top: 50px;
		height: 10px;
		width: 120rpx;
	}


 
</style>